<template>
    <el-container>
        <el-header>
            <div style="height: 50%">
                <el-dropdown
                        style="float: right; margin-right: 1%; margin-top: 1%"
                        @command="handleCommand">
                    <el-avatar :size="40" :src="circleUrl"></el-avatar>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="person">个人中心</el-dropdown-item>
                            <el-dropdown-item command="loginOut">注销</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

            </div>
            <div style="float: left; width:15%">
            </div>
            <el-menu
                    ref="menuTree"
                    :default-active="menuIndex"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="transparent"
                    style="height: 50%; float: right; width:85%"
                    text-color="white"
                    :router="true"
            >
                <el-menu-item style="height: unset; line-height: unset;" index="/main" route="/main">
                    首页
                </el-menu-item>
                <el-menu-item style="height: unset; line-height: unset;" index="/about" route="/about">
                    笔记
                </el-menu-item>
                <el-menu-item style="height: unset; line-height: unset;" index="/personCenter" route="/personCenter">
                    个人中心
                </el-menu-item>
                <!--          <el-sub-menu index="2">-->
                <!--            <template #title>Workspace</template>-->
                <!--            <el-menu-item index="2-1">item one</el-menu-item>-->
                <!--            <el-menu-item index="2-2">item two</el-menu-item>-->
                <!--            <el-menu-item index="2-3">item three</el-menu-item>-->
                <!--            <el-sub-menu index="2-4">-->
                <!--              <template #title>item four</template>-->
                <!--              <el-menu-item index="2-4-1">item one</el-menu-item>-->
                <!--              <el-menu-item index="2-4-2">item two</el-menu-item>-->
                <!--              <el-menu-item index="2-4-3">item three</el-menu-item>-->
                <!--            </el-sub-menu>-->
                <!--          </el-sub-menu>-->
                <!--        <el-menu-item index="3">Info</el-menu-item>-->
                <!--        <el-menu-item index="4">Orders</el-menu-item>-->
            </el-menu>
        </el-header>

        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>
</template>

<script>
    import {defineComponent} from 'vue'
    import router from '../router'

    export default defineComponent({
        name: "Home",
        data() {
            return {
                circleUrl: 'http://47.106.102.16/api/%E5%A4%B4%E5%83%8F.jpg',
                menuIndex: '/main',
                routerFlag: true
            }
        },
        methods: {
            handleCommand(command) {
                if (command == 'person') {
                    this.menuIndex = '/personCenter';
                    router.replace('/personCenter');

                }
                if (command == 'loginOut') {
                    router.replace('/login');
                    this.$store.commit("DEL_TOKEN")
                }
            },
            setCurrentRoute () {
                console.log(this.$route.path);
                if((this.$route.path) == '/'){
                    router.replace('/main');
                }else{
                    this.menuIndex = this.$route.path
                }

            },
        },
        setup() {
            const handleSelect = (key, keyPath) => {
                console.log(key, keyPath)
            };
            return {
                handleSelect,
            };
        },
        created() {
            this.setCurrentRoute();
            this.axios.get('/api/tokenVerify', {headers:{
                    "Authorization": this.$store.state.token
                }})
                .then(response => {
                    if(response.data.code == 200){
                        console.log("验证成功");
                        console.log(response.data);
                    }else if(response.data.code == 401){
                        this.$router.push('/login')
                    }else {
                        console.log("服务异常")
                    }
                })
        }
    })
</script>
